<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 23827
  Date: 2019/9/22
  Time: 21:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>centerAddress</title>


    <link rel="stylesheet" href="../css/user/centerAddress.css" type="text/css">

    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.css" type="text/css">
</head>

<body>


<%@ include file="../common/nav.jsp"%>


<!-- 第二层导航栏 -->

<!-- 第三层信息填写 -->
<div style="overflow: hidden;margin-top: 50px">
    <!-- 左边 -->
    <div id="left">
        <a href="${path}/edit/list" class="list-group-item active">
            实名认证
        </a>
        <a href="${path}/information/list" id="click2" class="list-group-item">信息完善</a>
        <a href="${path}/number/list" class="list-group-item">手机绑定</a>
        <a href="${path}/address/list" class="list-group-item">地址管理</a>
        <a href="${path}/password/list" class="list-group-item">密码管理</a>
    </div>
    <!-- 右边 -->
    <div id="right">
        <!-- 右边第一层 -->
        <div id="right-first">
            <h4 id="characters1">地址管理</h4>
        </div>
        <!-- 右边第二层 -->
        <div>
            <p id="characters2">地址最多填写5个,方便在您使用的时候快速选择</p>
        </div>
        <!-- 右边第三层表格显示地址 -->
        <div id="table">
            <table class="table">
                <thead>
                <tr class="active">
                    <th>姓名</th>
                    <th>联系电话</th>
                    <th>地址</th>
                    <th>操作</th>
                    <th></th>
                </tr>
                </thead>

                <c:forEach items="${addressList}" var="ado">
                <tbody>
                <c:if test="${ado.dataFlag == 1}">
                <tr class="active">
                    <td id="td-1">${ado.username}</td>
                    <td id="td-1">${ado.phoneNumber}</td>
                    <td id="td-1">${ado.provinceName}${ado.cityName}${ado.areaName}${ado.addressDeatil}</td>
                    <td id="td-1"><a href="${path}/address/del?id=${ado.id}">删除</a></td>
                    <c:if test="${ado.isDefault == 1}">
                    <td><button type="button" class="btn btn-primary" id="button-2" style="background-color: #00b7ee">默认地址</button></td>
                    </c:if>
                    <c:if test="${ado.isDefault == 0}">
                        <td><button type="button" class="btn btn-primary" id="button-1"><a href="${path}/address/update?id=${ado.id}">设为默认</a></button></td>
                    </c:if>
                </tr>
                </c:if>

                </tbody>
                </c:forEach>
                <%--<c:if test="${ado.dataFlag == 0}">您还没有添加地址</c:if>--%>

            </table>
        </div>

        <!-- 右边第四层添加按钮 -->
        <div>
            <button type="button" class="btn btn-primary" class="button-3" data-toggle="modal"
                    data-target="#myModal" style="margin-left: 20px">添加新地址</button>
        </div>

        <span id="userId" style="display: none">${sessionScope.userId}</span>


        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel" style="margin-left: 22px">地址管理</h4>
                    </div>
                    <div class="modal-body"><input id="username" type="text" class="modal-text" placeholder="联系人姓名"></div>
                    <div class="modal-body"><input id="phoneNumber" type="text" class="modal-text" placeholder="联系人电话"></div>

                    <!-- 省市区三级联动 -->
                    <div id="linkage">
                        <h5>请您选择省市区</h5>
                        <form class="form-inline">
                            <div data-toggle="distpicker">
                                <div class="form-group">
                                    <label class="sr-only" for="province1">Province</label>
                                    <select class="form-control" id="province1"></select>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="city1">City</label>
                                    <select class="form-control" id="city1"></select>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="district1">District</label>
                                    <select class="form-control" id="district1"></select>
                                </div>
                            </div>
                        </form>

                    </div>


                    <div class="modal-body"><input name="addressDeatil" type="text" class="modal-text" id="addressDeatil" placeholder="请输入详细地址"></div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" class="button-3" id="commit">确定提交</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>



    </div>
</div>

<%@ include file="../common/footer.jsp"%>


<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="../plugins/bootstrap/js/bootstrap.js"></script>

<script src="../plugins/bootstrap-date/js/distpicker.data.js"></script>
<script src="../plugins/bootstrap-date/js/distpicker.js"></script>
<script src="../plugins/bootstrap-date/js/main.js"></script>

<script src="../js/center/centerAddress.js"></script>
</body>

</html>